<!doctype html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>JLaTeXMath with javascript</title>
    <script type="text/javascript" language="javascript" src="jlatexmath/jlatexmath.nocache.js"></script>
    <script>
        var drawLatex = function(id) {
        var canvas;
        if (id == 4) {
        	canvas = document.createElement('canvas');
        	document.body.appendChild(canvas);
        } else {
        	canvas = document.getElementById('latex'+id);
        	}
        
          var context = canvas.getContext('2d');

          // jlmlib.drawLatex(...) params
          
          var opts = {
            context : canvas.getContext('2d'),
            latex : "\\sqrt{"+id+"}",
            size : 14,
            x : 0,
            y : 0,
            type : 0,
            foregroundColor : '#000000',
            backgroundColor : '#FF0000',
            callback : function() { console.log('callback') },
            insets : {
              top : 0,
              bottom : 0,
              left : 0,
              right : 0
            }
          }
          
          var ret = jlmlib.drawLatex(opts);
          var bsline = ret.height * ret.baseline;
           //canvas.width = ret.width;
      		//canvas.height = ret.height;
      		//canvas.style.width=ret.width+"px";
      		//canvas.style.height=ret.height+"px";
			//canvas.style.width= "100px"
			canvas.style.height= "100px"
          canvas.style.width= "100px"
          console.log(ret);
        }
        
        var drawAll = function() {
        	jlmlib.initWith("\\DeclareMathOperator{\\sech}{sech} ");
        	jlmlib.initWith("\\DeclareMathOperator{\\csch}{csch} ");
        	for(var i = 1; i < 5; i++) {
        		drawLatex(i);
        	}
        }
    </script>
  </head>

 
  <!-- Maybe a callback from the library would be good to signal the availability of the library -->
  <body onload="setTimeout(drawAll, 2500)">
    <h1>JLaTeXMath test</h1>
    <!-- Important to set no just the height/width in style, but the height/width property of canvas also. -->
    <canvas id="latex1" style="height: 100px; width: 100px" width="100px" height="100px"></canvas>
    <br>
    <canvas id="latex2" style="height: 100px; width: 100px" width="100px" height="100px"></canvas>
    <br>
    <canvas id="latex3" style="height: 100px; width: 100px" width="100px" height="100px"></canvas>
    <br>
    
  </body>
</html>
